<template>
	<view class="page-content">
		<view class="control-layout">
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"><text>获取手机号</text></button>
			<button @click="cancelAuth"><text>取消授权</text></button>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
	data() {
		return {};
	},
	computed: {
		...mapState({
			user: state => state.user.info
		})
	},
	methods: {
		...mapActions(['getPhone']),
		cancelAuth() {
			uni.navigateBack();
		},
		getPhoneNumber(e) {
			this.$debounce.debounce({
				key: 'getPhoneNumber',
				time: 3000,
				success: () => {
					if (e.detail.errMsg !== 'getPhoneNumber:fail user deny') {
						this.getPhone(e.detail).then(res => {
							uni.navigateBack();
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import './auth-phone.scss';

/deep/button {
	background: linear-gradient(to right, #ff720a 0%, #ffc429 100%) !important;
	color: #f3f3f3 !important;
	font-size: $font-large;
	text-align: center;
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	width: 100%;
	margin: $spacing-large 0;
}
/* 去掉uniapp中button自带的边框 */
/deep/button::after {
	border: none;
}
</style>
